<template>
	<view class="v-home-page">
		<view :style="{ height: navTop + 'px' }"></view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 扣点记录</text>
		</view>


		<view class="bg margin-top_40rpx" :style="{ '--bg-image': `url(${ withdrawalBg})` }">
			<view class="flex-between" style="height: 100%;">
				<view>
					<view class="flex-between">
						<view class="flex-columns">
							<view class="font-size_30rpx margin-bottom_10rpx" style="color: #fff;">
								当前算力
							</view>
							<view class="margin-bottom_30rpx font-weight_bold" style="color: #fff;font-size: 50rpx">
								{{balanceStatisInfo.balance}}
							</view>
						</view>
						<view class="withdrawalBtn flex" @click="goWithdrawal()" v-if="memberSetObj.is_open==1">
							去充值
						</view>
					</view>

					<view class="detailsContainer flex-between  margin-top_20rpx">

						<block v-for="(i, j) in brokerageList" :key="j">
							<view class="flex-column v-price" @click="toGo(i.url)">
								<view style="color: #ffffff;">{{ i.num }}</view>
								<text
									style="font-size: 24rpx;color: rgba(255, 255, 255, 0.71); margin-top: 10rpx;">{{ i.title }}</text>
							</view>

						</block>

					</view>

				</view>
				<view class=" flex">

				</view>
			</view>

		</view>
		<view class="flex-start-center margin-top_40rpx">
			<picker mode="selector" @change="bindPickerChange2" :data-userId="item.id" :range="groupList"
				:range-key="'groupName'">
				<view class="flex-start">

					<view class="" style="font-size: 26rpx;margin-right: 8rpx;">
						{{titleType?titleType:'全部类型'}}
					</view>
					<uni-icons type="down" color='#333' size="14"></uni-icons>

				</view>
			</picker>
			<view style="margin-left: 60rpx;">
				<picker mode="date" :value="date"  :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="flex-align-center-justify-start  color6">
						<view class="" style="font-size: 26rpx;">
							{{ yeartime }}
							<text>-</text>
							{{ monthtime }}
							<text>-</text>
							{{dayTime}}
							<uni-icons style="margin-left: 8rpx;" type="down" color='#333' size="14"></uni-icons>
						</view>

					</view>

				</picker>
			</view>
		</view>
		<mescroll-body ref="mescrollRef " @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="withdrawalList" v-for="(item,index) in balanceLogList" :key="index">
				<view class="padding-bottom_20rpx flex-between border-bottom-f7f7f7">
					<view class=" flex-columns">




						<view class="flex-columns">
							<view class=" flex-start-center">
								<view class=" font-weight_bold font-overflow" style="font-size: 30rpx;width: 300rpx;">
									{{item.name}}
								</view>

							</view>
							<view class="  font-size_24rpx margin-top_20rpx" style="color: #0E95F9;">
								类型：{{wayStatusFn(item.way)}}
							</view>
						</view>

					</view>
					<view class="flex-column-end">
						<view v-if="item.type==2" class="font-weight_bold"
							style="color: rgb(255, 0, 0);font-size: 30rpx;">
							-{{item.money}}
						</view>
						<view v-else class="font-weight_bold" style="color: #0E95F9;font-size: 30rpx;">
							{{item.money}}
						</view>
						<view class="margin-top_16rpx margin-top_20rpx" style="color: #999999;">
							{{item.type==1?'收入':'支出'}}
						</view>
					</view>
				</view>
				<view class="margin-top_20rpx flex-start-center" style="color: #999999;">

					<text style="font-size: 25rpx;margin-bottom: 5rpx;">生成时间：{{item.create_time}}</text>
				</view>
			</view>
		</mescroll-body>




	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				titleType:'',
				date: currentDate,
				groupList: [{
					id: 1,
					groupName: '会员充值'

				},{
					id: 2,
					groupName: '加油包充值'

				},
				{
					id: 3,
					groupName: '爆款拆剪'
				
				},{
					id: 4,
					groupName: '关键词创作'
				
				},
				{
					id: 5,
					groupName: '热点创作'
				
				},{
					id: 6,
					groupName: '模板创作'
				
				},{
					id: 7,
					groupName: 'AI话题 '
				
				},
				{
					id: 8,
					groupName: 'IP账号模仿'
				
				},
				{
					id: 9,
					groupName: '提取文案'
				
				},
				{
					id: 10,
					groupName: '视频分析'
				
				},
				{
					id: 11,
					groupName: '数字人形象克隆'
				
				},
				{
					id: 12,
					groupName: '数字人音色克隆'
				
				},
				{
					id: 13,
					groupName: '生成文案'
				
				},
				{
					id: 14,
					groupName: '邀请好友'
				
				},
				{
					id: 15,
					groupName: 'D音发布'
				
				},{
					id: 16,
					groupName: 'K手发布'
				},
				{
					id: 17,
					groupName: '小红薯发布'
				},
				{
					id: 18,
					groupName: '视频H发布'
				},{
					id: 19,
					groupName: '数字人声音合成'
				},{
					id: 20,
					groupName: '数字人合成'
				},{
					id: 21,
					groupName: '智能剪辑'
				}],



				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],

				dayTime: currentDate.split('-')[2],
				currentTime: 1,
				memberSetObj:{},



				month: '',
				year: '',
				startDate() {
					return this.getDate('start');
				},
				endDate() {
					return this.getDate('end');
				},

				currentTimeFn() {
					return function(currentIndex) {
						if (currentIndex == '1') {
							// 日
							return 'day';

						} else if (currentIndex == '2') {
							// 月
							return 'month';
						} else if (currentIndex == '3') {
							// 年
							return 'year';
						}
					};
				},
				navTop: '',
				withdrawalBg: this.$imgs.group3276Five,
				brokerageList: [


				],
				balanceStatisInfo: {},
				balanceLogList: [],
				wayType:'',
				memberSetObj:{}


			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;

			this.balanceStatis()
			this.memberSetFn()


		},
		computed: {
			// 订单状态
			wayStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '后台' : status == 1 ? '会员充值' : status == 2 ? '加油包充值' : status == 3 ? '爆款拆剪' :
						status == 4 ? '关键词创作' : status == 5 ? '热点创作' : status == 6 ? '模板创作' : status == 7?'AI话题 ':status == 8?'IP账号模仿':status == 9?'提取文案': status == 10?'视频分析':status == 11?'数字人形象克隆':status == 12
						?'数字人音色克隆':status == 13?'生成文案':status == 14?'邀请好友':status == 15?'D音发布':status == 16?'K手发布':status == 17?'小红薯发布':status == 18?'视频H发布':status == 19?'数字人声音合成':status == 20?'数字人合成':'智能剪辑';

					return orderStatus;
				};
			},

		},
		methods: {
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {
			
			
					}
				});
				if (result.errno == 0) {
			
					this.memberSetObj = result.data
			
					console.log(result.data)
			
				}
			},
			goWithdrawal(){
				this.$sun.navGo('/pages/contactUs/memberCenter')
			},
			bindPickerChange2(e) {
				console.log("---->", e);
				this.titleType=this.groupList[e.detail.value].groupName
				this.wayType=Number(e.detail.value)+1
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			},
			// 我的订单
			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.balanceLog,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						page: scroll.num,
						psize: 10,
						day: this.yeartime+'-'+this.monthtime+'-'+this.dayTime,
						way: this.wayType?this.wayType:''



					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.balanceLogList = [];
					this.balanceLogList = this.balanceLogList.concat(result.data.list);

					// this.balanceLogList = [{
					// 	type: 1,
					// 	way: 3,
					// 	name: 'xxxxx',
					// 	money: '8888',
					// 	create_time: '2015.8.6'
					// }, {
					// 	type: 2,
					// 	way: 3,
					// 	name: 'xxxxx',
					// 	money: '8888',
					// 	create_time: '2015.8.6'
					// }]

					// if (this.distributionSet.distribution_level != 0) {
					// 	this.getChange2(0);
					// }
				}
			},


			async balanceStatis() {
				const result = await this.$http.get({
					url: this.$api.balanceStatis,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					console.log(result)
					this.balanceStatisInfo = result.data
					this.brokerageList = [

						{
							num: result.data.today,
							title: '今日使用'

						},
						{
							num: result.data.yesterday,
							title: '昨日使用'

						},
						{
							num: result.data.all,
							title: '累计使用'

						}
					]


				}
			},
			navBack() {
				this.$sun.navBack()
			},
		

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

		




			bindDateChange(e) {
				// console.log( e)

				// 	this.createTime = e.detail.value
				console.log(e.detail.value)
				const [year, month, day] = e.detail.value.split('-');

				console.log("Year:", year);
				this.year = year
				this.month = month
				this.day = day
				this.yeartime = year
				//选择的月份
				this.monthtime = month

				this.dayTime = day

				// this.dataFilter = e.target.value;
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			},

		}
	}
</script>

<style lang="less">
	.v-home-page {

		position: relative;
		height: 100vh;
		padding: 20rpx;
		position: relative;

		.withdrawalList {


			border-radius: 20rpx;

			background: rgb(255, 255, 255);
			padding: 30rpx 30rpx;

			margin-top: 40rpx;

			.imgIcon {
				width: 75.78rpx;
				height: 75.78rpx;
				margin-right: 15rpx;
				border-radius: 50%;
			}

			.green {
				border-radius: 8rpx;
				min-width: 156rpx;
				max-width: 190rpx;
				padding: 10rpx;
				background: rgba(9, 186, 7, 0.1);
				color: rgb(49, 169, 82);

			}

			.blue {
				border-radius: 8rpx;
				width: 92rpx;
				height: 38rpx;
				background: #F5F5F5;
				color: #999999;
				margin-left: 15rpx;
			}

			.red {
				border-radius: 8rpx;
				width: 92rpx;
				height: 38rpx;
				background: #FF2B2B;
				color: #fff;
				margin-left: 15rpx;
			}
		}

		.bg {
			background-repeat: no-repeat;
			// height: 300rpx;
			border-radius: 20rpx;
			padding: 12rpx;
			background-image: (var(--bg-image));
			background-size: cover;
			// margin: 30rpx;
			padding: 40rpx;

			.withdrawalBtn {
				border-radius: 200rpx;
				width: 142rpx;
				height: 68rpx;
				color: #2870FE;
				background: rgb(255, 255, 255);
			}

			.detailsContainer {
				width: 642rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				.v-price {
					color: #fff;
					// margin-bottom: 48rpx;
					width: calc(100% / 3);

					view {
						color: #fff;
						font-size: 30rpx;
						margin-bottom: 10rpx;
					}
				}

			}
		}
	}
</style>